<template>
    <div ref="alPie"></div>
</template>

<script>
  import { Pie } from '@antv/g2plot';
  import {paramDeal} from "../../utils/util";
    export default {
      name: "alPie",
      data(){
        return{

        }
      },
      props:{
        dataList:Array,
        title:String,//标题
        describe:String,//图表描述
      },
      methods:{
        /**
        * @author 张天丰
        * @date 2020/8/21
        * @Description：初始化饼图
        */
        initPie(){
          //获取数组对象的key值
          const arrKey = paramDeal.arrKey(this.dataList);
          const piePlot = new Pie(this.$refs.alPie, {
            forceFit: true,
            title: {
              visible: this.title?true:false,
              text: this.title,
            },
            description: {
              visible: this.describe?true:false,
              text: this.describe,
            },
            radius: 0.8,
            data:this.dataList,
            colorField: arrKey[0],//类型
            color:['#3c90f7','#55bfc0','#5ebe67'],
            angleField: arrKey[1],//值
            label: {
              visible: true,
              type: 'inner',
              style:{
                fill:'#fff',
                fontWeight:100,
              }
            },
          });
          piePlot.render();
        },
      },
      mounted() {
        this.initPie();
      }
    }
</script>

<style scoped>

</style>
